<template>
  <div class="root base-background-img">
    <div class="home">
      <router-link to="/">
        <img src="~@/assets/hohoplay/common/home.png">
      </router-link>
    </div>
    <div class="back">
      <router-link :to="{name: 'robot-base', query: {component: 'robotBase-index2'}}">
        <img src="~@/assets/hohoplay/common/back.png">
      </router-link>
    </div>
    <div class="type">
      <img src="~@/assets/robot/common/biaoti.png">
    </div>
    <div class="option1" v-on:click="cailiao">
        <img src="~@/assets/robot/common/cailiao.png">
    </div>
    <div class="option2" v-show="xiala">
      <router-link :to="{name: 'grade-base', query: {component: 'robot-grade1'}}">
        <img src="~@/assets/robot/common/jibiexiala.png">
      </router-link>
    </div>
    <div class="left">
      <img @click="toggleTabs('dec')" src="~@/assets/images/common/left.png">
    </div>
    <div class="right">
      <img @click="toggleTabs('add')" src="~@/assets/images/common/right.png">
    </div>
    <ul class="ul-item">
      <li class="li-item" v-for='(item, index) in tabs' :key="index" :class="{'active': item.isSelected}" @click="setCur(item)">{{item.text}}</li>
    </ul>
    <component :is="currentView" keep-alive></component>
  </div>
</template>

<script>
import taikongsha from './taikongsha'
import zhika from './zhika'
import dakeli from './dakeli'
import zhizhantu from './zhizhantu'
export default {
  name: 'cailiao_base',
  data () {
    return {
      xiala: false,
      currentIndex: 1,
      currentView: 'cailiao1',
      tabs: [{
        isSelected: 1,
        name: 'cailiao1',
        text: '太空沙'
      }, {
        isSelected: 0,
        name: 'cailiao2',
        text: '纸卡'
      }, {
        isSelected: 0,
        name: 'cailiao3',
        text: '大颗粒'
      }, {
        isSelected: 0,
        name: 'cailiao4',
        text: '纸粘土'
      }]
    }
  },
  components: {
    'cailiao1': taikongsha,
    'cailiao2': zhika,
    'cailiao3': dakeli,
    'cailiao4': zhizhantu
  },
  created () {
    let that = this
    that.currentView = 'cailiao1'
    if (that.$route.query.compoent !== undefined) {
      // 传入参数时修改
      that.currentView = that.$route.query.compoent
      this.currentIndex = parseInt(that.$route.query.compoent.substr(-1))
      this.tabs.forEach(item => {
        item.isSelected = (item.name === that.$route.query.compoent)
      })
    }
  },
  methods: {
    cailiao: function () {
      if (this.xiala === false) {
        this.xiala = true
      } else this.xiala = false
    },
    setCur: function (selectedItem) {
      this.currentView = selectedItem.name
      this.currentIndex = parseInt(this.currentView.substr(-1))
      this.tabs.forEach(item => {
        item.isSelected = (item.name === selectedItem.name)
      })
    },
    toggleTabs: function (func) {
      if (func === 'add') {
        if (this.currentView !== 'cailiao4') {
          this.currentIndex = this.currentIndex + 1
          this.currentView = 'cailiao' + this.currentIndex
        }
      } else {
        if (this.currentView !== 'cailiao1') {
          this.currentIndex = this.currentIndex - 1
          this.currentView = 'cailiao' + this.currentIndex
        }
      }
      this.tabs.forEach(item => {
        item.isSelected = (item.name === this.currentView)
      })
    }
  }
}
</script>

<style scoped>
@import "~@/assets/style/base.css";
.root {
  color: #999999;
  font-size: 22pt;
  background: url(~@/assets/robot/common/cailiaobg.png);
}
.root > div {
  position: absolute;
  user-select: none;
}
a{
  color:white;
  text-decoration: none;
}
.ul-item {
  margin: 0;
  padding: 0;
  list-style-type: none;
  z-index: 10;
  top: 70px;
  left: 440px;
  height: 35px;
  width: 450px;
  position: absolute;
}
.li-item {
  cursor: pointer;
  float: left;
  border-left: 2px solid #000;
  height: 35px;
  padding-left: 13px;
  padding-right: 13px;
}
li:last-child{
  border-right: 0;
}
.active {
  color: #000;
}
.home {
  top: 54px;
  left: 57px;
  z-index: 10;
}
.back {
  top: 153px;
  left: 57px;
  z-index: 10;
}
.type {
  z-index: 10;
  top: 50px;
  left: 318px;
}
.left {
  z-index: 10;
  top: 370px;
  left: 118px;
}
.right {
  z-index: 10;
  top: 370px;
  left: 1135px;
}
.option1{
  z-index: 10;
  top: 73px;
  left: 360px;
  cursor: pointer;
}
.option2{
  z-index: 10;
  top: 110px;
  left: 350px;
  cursor: pointer;
  width:85px;
  height:40px;
  text-align: center;
  background-color: rgb(236,131,107);
  color:white;
  }
</style>
